<div>
    <div class="mb-3">
        <div class="input-group mb-3 hidden">
            <div class="input-group-prepend">
                <span class="input-group-text">URL</span>
            </div>
            <input type="text" onclick="this.select()" ng-model="$ctrl.srcUrl" class="form-control hidden"
                placeholder="https://your-image-url...">
        </div>
        <div class="input-group">
            <div class="custom-file">
                <input id="{{$ctrl.id}}" accept="image/*" type="file" name="pic-{{$ctrl.id}}"
                    ngf-select="$ctrl.selectFile($file, $invalidFiles)" data-file="file.file" class="hidden" />
                <label class="custom-file-label" for="{{$ctrl.id}}">Upload file...</label>
            </div>
        </div>
    </div>
    <div class="row">
        <!-- Croppie needs a container -> using 'boundary' option -->
        <div class="col-sm-6">
            <croppie ng-if="$ctrl.cropped.source" src="$ctrl.cropped.source" ng-model="$ctrl.cropped.image" 
                viewport-w="$ctrl.options.boundary.width" viewport-h="$ctrl.options.boundary.height"
                output-w="$ctrl.options.output.width" output-h="$ctrl.options.output.height"
                on-update="$ctrl.combineImage()" options="$ctrl.options"></croppie>
        </div>
        <div class="col-sm-6">
            <img id="result" class="ml-auto mr-auto d-none" ng-src="{{$ctrl.postedFile.fileStream}}" width="{{$ctrl.options.render.width}}"
                height="{{$ctrl.options.render.height}}" /><br>
            <a class="btn btn-default" ng-if="$ctrl.postedFile.fileName" ng-click="$ctrl.saveCanvas()">Save</a>
            <canvas id="canvas-{{$ctrl.id}}" class="ml-auto mr-auto d-none" style="position:absolute"
                width="{{$ctrl.options.output.width}}" height="{{$ctrl.options.output.height}}"></canvas>
            <img id="croppie-src" class="ml-auto mr-auto d-block" style="position:absolute;top:0"
                ng-src="{{$ctrl.cropped.image}}" width="{{$ctrl.options.boundary.width}}" height="{{$ctrl.options.boundary.height}}"/>
            <input type="hidden" value="{{$ctrl.type}}/{{$ctrl.folder}}" class="folder-val">
        </div>
    </div>
</div>